<template>
	<view>
		<view class="box">
			<view class="banner">
				<!-- banner图片 -->
				<image :src="list2.mainImage" style="width: 100%;height: 410rpx;" mode=""></image>
				<!-- 文字模块 -->
				<view class="text" style="width: 100%;height: 230rpx;padding: 20rpx;box-sizing: border-box;">
					<view style="display: flex;align-items: center;">
						<view style="font-size: 50rpx;color: red;">￥{{ list2.priceDiscount }}</view>
						<view style="font-size: 30rpx;color: #C0C0C0;text-decoration: line-through;">￥{{ list2.priceOriginal }}</view>
						<view style="color: red;border: 1rpx solid red;border-radius: 10rpx;font-size: 20rpx;">优惠价</view>
					</view>
					<view style="font-size: 45rpx;font-weight: 900;">{{ list2.title }}</view>
					<view style="display: flex;font-size: 18rpx;color: #ababab;">
						<view>{{ list2.goodRate }}好评</view>
						<view>{{ list2.studyTotal }}人在学习</view>
					</view>
				</view>
			</view>
			<!-- uview -->
			<u-sticky bgColor="#fff"><u-tabs @change="change" :list="list1" :current="current" style="width: 100%;display: flex;justify-content: center;"></u-tabs></u-sticky>
			<!-- uview -->
			<view v-show="current == 0" style="width: 100%;height: 20000rpx;">
				<image :src="bgimg" mode="" style="height: 100%;width: 100%;"></image>
				<view style="display: flex;justify-content: center;align-items: center;">到底了~~~</view>
			</view>
			<view v-show="current == 1">
				<view class="ul" style="font-size: 40rpx;font-weight: 900;" v-for="(item, index) in list3" :key="index">
					第{{ index + 1 }}章{{ item.name }}
					<view
						class="li"
						v-for="(ite, ind) in item.sectionList"
						:key="ind"
						style="font-size: 30rpx;font-weight: 500;padding: 20rpx;width: 100%;height: 140rpx;line-height: 140rpx;border-bottom: 1rpx solid #C0C0C0;box-sizing: border-box;display: flex;justify-content: space-between;align-items: center;"
					>
						<view>{{ index + 1 }}-{{ ind + 1 }}{{ ite.name }}</view>
						<view style="color: #007AFF;">试看</view>
					</view>
				</view>
				<view style="display: flex;justify-content: center;align-items: center;">到底了~~~</view>
			</view>
			<view v-show="current == 2">
				<view style="padding: 20rpx;box-sizing: border-box;width: 100%;height: 200rpx;" v-for="(item, index) in list4" :key="index">
					<view class="shang" style="display: flex;align-items: center;justify-content: space-between;">
						<view style="display: flex;align-items: center;">
							<image :src="item.userImage" mode="" style="width: 80rpx;height: 80rpx;"></image>
							<view>
								<view style="font-size: 35rpx;font-weight: 900;">{{ item.nickName }}</view>
								<view>{{ item.createDate }}</view>
							</view>
						</view>
						<view>
							<view v-show="item.isGood > 0">🦢</view>
							<view v-show="item.isGood == 0">🐤</view>
						</view>
					</view>
					<view class="xia">{{ item.content }}</view>
				</view>
				<view style="display: flex;justify-content: center;align-items: center;">到底了~~~</view>
			</view>
			<view v-show="current == 3">
				<view v-for="(item, index) in list5" :key="index" style="margin: 20rpx;border-radius: 20rpx;border: 1rpx solid #C8C9CC;">
					<view class="title">{{ item.title }}</view>
					<LIST :list1="item.list" @detaile="detail"></LIST>
					<view style="display: flex;justify-content: space-between;align-items: center;">
						<view style="display: flex;align-items: center;">
							<view style="font-size: 40rpx;color: red;">￥{{ item.groupPrice }}</view>
							<view style="font-size: 30rpx;color: #C0C0C0;text-decoration: line-through;">￥{{ item.totalPrice }}</view>
						</view>
						<view style="color: red;">立即购买</view>
					</view>
				</view>
				<view style="display: flex;justify-content: center;align-items: center;">到底了~~~</view>
			</view>
			<view class="footer" style="position: fixed;left: 0;bottom: 0;width: 100%;height: 100rpx;background-color: #fff;display: flex;align-items: center;padding: 0rpx 20rpx;">
				<view style="width: 100%;height: 80rpx;background-color: #007AFF;border-radius: 50rpx;text-align: center;line-height: 80rpx;color: #fff;" @click="isLogin">
					立即购买
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import api from '@/api/api.js';
import LIST from '@/components/list/list.vue';
export default {
	components: { LIST },
	data() {
		return {
			list1: [
				{
					name: '详情'
				},
				{
					name: '章节'
				},
				{
					name: '评论'
				},

				{
					name: '套餐'
				}
			],
			current: 0,
			list2: {}, //首页的数据
			bgimg: '', //详情的图片
			list3: [], //章节
			list4: [], //评论
			list5: []
		};
	},
	onLoad() {},
	onShow() {
		this.getlist1();
		this.getlist2();
		this.getlist3();
		this.getlist4();
	},
	methods: {
		change(e) {
			console.log(e);
			this.current = e;
		},
		async getlist1() {
			let mes = `/course/api/course/null`;
			const { data } = await api.getdetail(mes);
			this.list2 = data;
			this.bgimg = data.detailUrls[0];
			uni.setNavigationBarTitle({
				title: data.title
			});
		},
		async getlist2() {
			let mes = `/course/api/chapter/section/list/null`;
			const { data } = await api.getdetail(mes);
			this.list3 = data;
			console.log(data, '222');
		},
		async getlist3() {
			let mes = `/course/api/comment/list/null`;
			const { data } = await api.getdetail(mes);
			console.log(data, '3333');
			this.list4 = data;
		},
		async getlist4() {
			let mes = `/course/api/group/list/null`;
			const { data } = await api.getdetail(mes);
			console.log(data);
			this.list5 = data;
		},
		isLogin() {
			let token = uni.getStorageSync('mxgEducationToken');
			if (!token) {
				console.log('已登录');
				uni.navigateTo({
					url: '/pages/auth/login'
				});
			} else {
				uni.setStorageSync('list2', this.list2);
				console.log('没有登录');
				uni.navigateTo({
					url: '/pages/order/order'
				});
			}
		}
	}
};
</script>

<style lang="scss">
.box {
	padding-bottom: 140rpx;
	box-sizing: border-box;
}
.tag-list {
	// 一行排列不下，换行
	flex-wrap: wrap;
	xpadding: 10rpx 25rpx;
	font-size: 14px;
	background-color: #ffffff;
	.tag-view {
		margin-top: 15rpx;
		margin-right: 20rpx;
	}
}

.content-main {
	padding: 25rpx;
	.title {
		font-size: 45rpx;
		line-height: 55rpx;
		font-weight: bold;
	}
	.info {
		display: flex;
		align-items: center;
		margin: 30rpx 0;
		.author {
			font-size: 30rpx;
			color: #303133;
			image {
				width: 45rpx;
				height: 45rpx;
				border-radius: 100%;
				margin-right: 10rpx;
			}
		}
		& > text {
			margin-left: 10rpx;
			font-size: 25rpx;
			color: #999;
		}
	}
}
</style>
